<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            text-decoration: none;
            list-style: none;
        }
        
        .wai {
            /* border: solid 1px; */
            width: 90%;
            height: 500px;
            margin: 0 auto;
        }
        
        .header>h4 {
            text-align: center;
            margin-top: 50px;
        }
        
        .list {
            margin-top: -20px;
            text-align: center;
            font-size: 12px;
        }
        
        .list>li {
            width: 20%;
            float: left;
            box-sizing: border-box;
            height: 300px;
            border: 1px solid #999;
        }
        
        .list>li>img {
            width: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="wai">
        <div class="header">
            <h4>商品列表展示</h4>
            <br>

            <ul class="list">
                <!-- <li data-id="1">
                    <img src="/p2_2004/day10_cart_shopping/imgs/01.png" alt="" class="shopping">
                    <p class="title">米家电磁炉</p>
                    <p class="price">249元</p>
                    <button type="button" id="shoppingcar">加入购物车</button>
                </li>
                <li data-id="2">
                    <img src="/p2_2004/day10_cart_shopping/imgs/02.png" alt="" class="shopping">
                    <p class="title">米家电磁炉</p>
                    <p class="price">249元</p>
                    <button type="button" id="shoppingcar">加入购物车</button>
                </li>
                <li data-id="3">
                    <img src="/p2_2004/day10_cart_shopping/imgs/03.png" alt="" class="shopping">
                    <p class="title">米家电磁炉</p>
                    <p class="price">249元</p>
                    <button type="button" id="shoppingcar">加入购物车</button>
                </li>
                <li data-id="4">
                    <img src="/p2_2004/day10_cart_shopping/imgs/04.png" alt="" class="shopping">
                    <p class="title">米家电磁炉</p>
                    <p class="price">249元</p>
                    <button type="button" id="shoppingcar">加入购物车</button>
                </li>
                <li data-id="5">
                    <img src="/p2_2004/day10_cart_shopping/imgs/05.png" alt="" class="shopping">
                    <p class="title">米家电磁炉</p>
                    <p class="price">249元</p>
                    <button type="button" id="shoppingcar">加入购物车</button>
                </li> -->
            </ul>
        </div>
    </div>
    <table border="1" cellspacing=0 style="text-align: center; margin: -120px 8%; width: 87%; border-color: #fff;">
        <thead>
            <tr>
                <th>全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td><input type="checkbox" id=""></td>
                <td>
                    <p>
                        <img src="/p2_2004/day10_cart_shopping/imgs/01.png" alt="" style="width: 100px; height: 100px;">
                        <span style="display: block; font-size: 15px; ">小米USB Type c快速充电数据线</span>
                    </p>
                </td>
                <td>
                    <button>-</button><input type="number" style="outline: none;"><button>+</button>
                </td>
                <td>16.9元</td>
                <td>
                    16.90
                </td>
                <td><button>删除</button></td>
                <td>
                    81473648
                </td>
            </tr> -->
        </tbody>
        <tfoot>
            <tr>
                <td><input type="checkbox" id="delxuan">全选按钮</td>
                <td><button type="button" id="del">删除选中商品</button></td>
                <td colspan="4"></td>
                <td>
                    总价：<br>
                    <div id="sum">

                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
    <script src="/p2_2004/day10_cart_shopping/js/getData.js" type="text/javascript" charset="utf-8"></script>
    <script src="gouwuche.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>